import { Table, Space, Card, Form, Button, Select, DatePicker, Input } from 'antd'
import { useStore } from '@/store'
import { useEffect, useRef, useState } from 'react'
import { http } from '@/utils'
const { RangePicker } = DatePicker
const OrderList = () => {
    const [form] = Form.useForm()
    const [tabsData, setTabsData] = useState([])
    const [dicData, setDicData] = useState({ '1000': [] })
    const [pushPoolTypeOpt, setPushPoolTypeOpt] = useState([])
    const [poolStatusOpt, setPoolStatusOpt] = useState([])

    const tabsDataRef = useRef()
    const { loginStore } = useStore()
    const [params, setParams] = useState({
        userId: loginStore.userId,
        pageNum: 1,
        pageSize: 20
    })

    const [ordersData, setordersData] = useState([])
    // const [loading, setLoading] = useState(true)
    useEffect(() => {
        const getTabs = async () => {
            const res = await http.post('/alarm/deliversign/findAlarmGroupInfoByPage', {
                userId: params.userId,
                pageNum: 1,
                pageSize: 9999
            })
            const list = res.body.list.length ? res.body.list.map(item => ({
                label: item.groupAlarmName,
                value: item.id,
                key: item.id
            })) : [{
                label: '--请选择--',
                value: '',
                key: ''
            }]
            console.log('用户预警组', list)
            setTabsData(list)
            tabsDataRef.current = list
        }
        const getDicfig = async () => {
            const res = await http.post('/alarm/deliversign/getDicConfig', {
                userId: params.userId,
                dictIds: [1000, 1012, 1013,]
            })
            setDicData(res.body)
            setPushPoolTypeOpt(res.body['1012'].map(item => {
                return { label: item.dictName, value: item.dictCode, key: item.dictCode, }
            }))
            setPoolStatusOpt(res.body['1013'].map(item => {
                return { label: item.dictName, value: item.dictCode, key: item.dictCode, }
            }))
            console.log('字典-', res.body)
        }
        const getList = async () => {
            const res = await http.post('/alarm/deliversign/findPoolInfoByPage', params)
            const list = res.body.list.map(item => {
                const row = {
                    ...item
                }
                return row
            })
            console.log('出入池列表-', list)
            const total = res.body.total
            setordersData({
                list: list,
                count: total
            })
        }
        if (dicData['1000'].length) {
            getList()
        } else {
            getDicfig()
            getTabs()
        }
    }, [params, dicData])
    const columns = [
        { title: '编号', dataIndex: 'id', width: 50 },
        {
            title: '品种名称', render: data => {
                return (
                    <Space size="middle">
                        <span>{data.featureName}</span>
                        <span>{data.featureCode}</span>
                        <span>{data.alias}</span>
                    </Space>
                )
            }
        },
        { title: '所属预警组', dataIndex: 'groupName' },
        { title: '入池时间', dataIndex: 'pushPoolTime' },
        {
            title: '入池方式', dataIndex: 'pushPoolType', render: (data) => {
                let pushPoolTypeName = '-'
                if (data) {
                    pushPoolTypeName = !pushPoolTypeOpt.length || pushPoolTypeOpt.filter(item => item.value === data)[0].label
                }
                return pushPoolTypeName
            }
        },
        { title: '入池价格', dataIndex: 'pushPoolPrice' },
        { title: '入池备注', dataIndex: 'pushPoolMark' },
        {
            title: '状态', dataIndex: 'poolStatus', render: (data) => {
                return <>

                    {data ? poolStatusOpt.filter(item => item.value === data)[0].label : '-'}

                </>
            }
        },
        { title: '出池时间', dataIndex: 'pollPoolTime' },
        {
            title: '出池方式', dataIndex: 'pollPoolType', render: (data) => {
                let pollPoolTypeName = '-'
                if (data) {
                    pollPoolTypeName = !pushPoolTypeOpt.length || pushPoolTypeOpt.filter(item => item.value === data)[0].label
                }
                return pollPoolTypeName
            }
        },
        { title: '出池价格', dataIndex: 'pollPoolPrice' },
        { title: '出池备注', dataIndex: 'pollPoolMark' },

    ]
    const onSeach = (values) => {
        const _params = {
            ...values,
            pushStartTime: values.pushTime ? values.pushTime[0].format('YYYY-MM-DD HH:mm:ss') : '',
            pushEndTime: values.pushTime ? values.pushTime[1].format('YYYY-MM-DD HH:mm:ss') : '',
            pollStartTime: values.pollTime ? values.pollTime[0].format('YYYY-MM-DD HH:mm:ss') : '',
            pollEndTime: values.pollTime ? values.pollTime[1].format('YYYY-MM-DD HH:mm:ss') : '',
        }
        setParams({
            ...params,
            ..._params,
            pageNum: 1,

        })
    }
    const pageChange = (page, pageSize) => {
        setParams({
            ...params,
            pageSize: pageSize,
            pageNum: page
        })
    }
    return (
        <>
            <Card title="出入池记录">
                <Form
                    form={form}
                    onFinish={onSeach}
                    initialValues={{}}
                >
                    <Form.Item style={{ margin: 0 }}>
                        <Form.Item label="品种" name="keyWord" style={{ display: 'inline-block', width: 300 }}>
                            <Input
                                allowClear
                                placeholder='请输入品种名称/代码/简称'
                                style={{ width: 220 }}
                            />
                        </Form.Item>
                        <Form.Item label="所属预警组" name="groupId" style={{ display: 'inline-block', width: 255 }}>
                            <Select
                                onChange={form.submit}
                                style={{ width: 150 }}
                                allowClear
                                placeholder="请选择所属预警组"
                                options={tabsData}
                            />
                        </Form.Item>
                        <Form.Item label="入池方式" name="pushPoolType" style={{ display: 'inline-block', width: 255 }}>
                            <Select
                                onChange={form.submit}
                                style={{ width: 150 }}
                                allowClear
                                placeholder="请选择入池方式"
                                options={pushPoolTypeOpt}
                            />
                        </Form.Item>
                        <Form.Item label="入池时间" name="pushTime" style={{ display: 'inline-block', width: 400 }}>
                            <RangePicker
                                format="YYYY-MM-DD HH:mm:ss"
                                showTime={{
                                    format: 'HH:mm:ss',
                                }}
                            />
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label="出池方式" name="pollPoolType" style={{ display: 'inline-block', width: 255 }}>
                        <Select
                            onChange={form.submit}
                            style={{ width: 150 }}
                            allowClear
                            placeholder="请选择出池方式"
                            options={pushPoolTypeOpt}
                        />
                    </Form.Item>
                    <Form.Item label="出池时间" name="pollTime" style={{ display: 'inline-block', width: 400, marginRight: 20 }}>
                        <RangePicker
                            format="YYYY-MM-DD HH:mm:ss"
                            showTime={{
                                format: 'HH:mm:ss',
                            }}
                        />
                    </Form.Item>
                    <Form.Item style={{ display: 'inline-block', width: 100, marginBottom: 10 }}>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
                <Table
                    rowKey="id"
                    size='middle'
                    columns={columns}
                    dataSource={ordersData.list}
                    pagination={
                        {
                            size: 'default',
                            showQuickJumper: true,
                            showSizeChanger: true,
                            pageSize: params.pageSize,
                            onChange: pageChange,
                            showTotal: (total, range) => `共 ${total} 条`,
                            total: ordersData.count,
                            current: params.pageNum
                        }
                    }
                    bordered
                />
            </Card >
        </>
    )
}

export default OrderList